<template>
   <el-table :data="datasList.pagedata" style="width: 100%">
    <el-table-column v-for="(item, index) in title" :key="index" :prop="item.prop" :label="item.label" :width="item.width" />
      <!-- <el-table-column prop="id" label="序号" width="120" />
      <el-table-column prop="title" label="商品名称" width="120" />
      <el-table-column prop="introduce" label="商品描述" width="1000" /> -->
      <el-table-column fixed="right" label="操作" width="120">
        <template #default="scope">
          <el-button link type="primary" size="small">
            <el-popconfirm width="220" confirm-button-text="确定" cancel-button-text="取消" :icon="InfoFilled"
              icon-color="#626AEF" title="确定要删除吗?" @confirm="handleClick(scope)">
              <template #reference>
                删除
              </template>
            </el-popconfirm>
          </el-button>
          <el-button link type="primary" size="small" @click="edit(scope)">编辑</el-button>
        </template>
      </el-table-column>
    </el-table>
</template>

<script setup lang="ts">
import {  InfoFilled } from '@element-plus/icons-vue'
// import { reactive } from 'vue';
    
    defineProps(['datasList','title'])
    let $emit = defineEmits()
    function handleClick(scope){
        console.log(scope);
        $emit('handleClick',scope)
    }
    
    function edit(scope){
        console.log(scope);
        $emit('edit',scope)
        
    }
</script>

<style scoped>

</style>